<template>
    <div>
        <a-button class="editable-add-btn" type="primary" @click="showAdd" style="margin-bottom: 8px">新增辈分</a-button>
        <a-table :dataSource="dataSource" :row-key="record=>record.id" :pagination="false">
            <a-table-column key="name" title="辈分" data-index="name"></a-table-column>
            <a-table-column key="sort" title="世代" data-index="sort"></a-table-column>
            <a-table-column key="memo" title="备注" data-index="memo">
                <template #default="{ text }">
                    {{text?text:'无'}}
                </template>
            </a-table-column>
            <a-table-column key="ctrls" title="操作" data-index="ctrls">
                <template #default="{ record }">
                    <a-button type="link" @click="edit(record)">编辑</a-button>
                    <a-divider type="vertical" />
                    <a-button type="link" danger @click="del(record)">删除</a-button>
                </template>
            </a-table-column>
        </a-table>

        <a-modal v-model:visible="editVisible" :title="waitingEditId?'编辑辈分':'新增辈分'" @ok="handleAdd" @cancle="cancelEdit" :width="600" :centered="true">
            <a-row>
                <a-col :span="4" class="label-name"><span class="red">*</span>辈分名称</a-col>
                <a-col :span="8">
                    <a-input v-model:value="formState.name" @change="changeName" />
                </a-col>
                <a-col :span="4" class="label-name"><span class="red">*</span>对应世代</a-col>
                <a-col :span="8">
                    <a-input-number style="width:100%;background:none;border-color:#700203" v-model:value="formState.generation" />
                </a-col>
            </a-row>


            <div class="blank"></div>
            <a-row>
                <a-col :span="4" class="label-name">备注</a-col>
                <a-col :span="20">
                    <a-textarea v-model:value="formState.memo" :auto-size="{ minRows: 2, maxRows: 5 }"></a-textarea>
                </a-col>
            </a-row>
        </a-modal>
    </div>
</template>

<script>
import { defineComponent, onMounted, reactive, toRefs,createVNode } from 'vue';
import { SmileOutlined,QuestionCircleOutlined } from '@ant-design/icons-vue';
import { message, Modal } from 'ant-design-vue/lib';
import Http from '@/until/http';
import { messageTips } from '@/until/tools';
export default defineComponent({    
    components:{SmileOutlined,QuestionCircleOutlined},
    setup() {
        const state = reactive({
            dataSource:[],
            editVisible:false,
            waitingEditId:null
        });

        const formState=reactive({
            name: '',
            generation:null,
            memo:''
        })

        const showAdd = ()=>{
            Object.assign(state,{
                editVisible:true
            })
        }

        const handleAdd = ()=>{
            if(formState.name==='') {
                message.warning('请填写辈分名称');
                return false;
            }
            if(!formState.generation) {
                message.warning('请填写对应世代');
                return false;
            }

            if(state.waitingEditId) {
                Http.updateGeneration({name:formState.name,sort:formState.generation,memo:formState.memo,id:state.waitingEditId}).then(res=>{
                    if(res) {
                        if(res.success) {
                            messageTips('编辑成功！',3);
                            getList();
                            Object.assign(state,{
                                editVisible:false,
                                waitingEditId:null
                            })
                            Object.assign(formState,{
                                name: '',
                                generation:null,
                                memo:''
                            })
                        } else{
                            messageTips(res.message,1);
                        }
                    }
                })
            } else {
                Http.addGeneration({name:formState.name,sort:formState.generation,memo:formState.memo}).then(res=>{
                    if(res) {
                        if(res.success) {
                            messageTips('新增成功！',3);
                            getList();
                            Object.assign(state,{
                                editVisible:false
                            })
                            Object.assign(formState,{
                                name: '',
                                generation:null,
                                memo:''
                            })
                        } else{
                            messageTips(res.message,1);
                        }
                    }
                })
            }            
        }

        const edit = (item)=>{
            Object.assign(state,{
                editVisible:true,
                waitingEditId:item.id
            })
            Object.assign(formState,{
                name: item.name,
                generation:item.sort,
                memo:item.memo
            })
        }

        const del = (item)=>{
            Modal.confirm({
                title:'提示',
                icon: createVNode(QuestionCircleOutlined),
                content:'您确定要删除吗？',
                centered:true,
                okText:'确定',
                cancelText:'取消',
                onOk(){
                    Http.delGeneration({id:item.id}).then(res=>{
                        if(res) {
                            if(res.success) {
                                messageTips(res.message,3);
                                getList();
                            } else {
                                messageTips(res.message,1);
                            }
                        }
                    })
                }
            })
        }

        const getList = ()=>{
            Http.getGenerationList().then(res=>{
                if(res) {
                    if(res.list) {
                        Object.assign(state,{
                            dataSource:res.list
                        })
                    }
                }
            })
        }

        const changeName=(e)=>{
            console.log(e.target.value)
            if(e.target.value.length>0) {
                Object.assign(formState,{
                    name:e.target.value.substring(0,1)
                })
            }
        }

        const cancelEdit=()=>{
            Object.assign(formState,{
                name: '',
                generation:null,
                memo:''
            })
            Object.assign(state,{                
                waitingEditId:null
            })
        }

        onMounted(()=>{
            getList();
        })

        return {
            ...toRefs(state),
            formState,
            showAdd,
            handleAdd,
            edit,
            del,
            changeName,
            cancelEdit
        }
    }
})
</script>

<style lang="scss">
@import '@/scss/generation.scss';
</style>